<template>
  <div class="app-container">
    <el-form>
      <el-form-item required>
        <el-select
          v-model="menu.qid"
          filterable
          placeholder="请选择题型"
          style="
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12),
              0 0 6px rgba(0, 0, 0, 0.04);
          "
        >
          <el-option
            v-for="item in menu"
            :label="item.label"
            :value="item.qid"
            :key="item.qid"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item style="width: 200px; margin-left: 60px">
        <el-button type="primary" @click="submitSure">确定</el-button>
      </el-form-item>
    </el-form>

    <el-dialog
      title="出题须知"
      center
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :show-close="false"
      :visible.sync="dialogFormVisible"
    >
      <el-input
        type="textarea"
        :rows="10"
        :disabled="true"
        v-html="textarea"
      >
      </el-input>
        <el-checkbox v-model="checked" style="margin:40px 20px 0px">我已知晓并同意遵守命题规范</el-checkbox>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="isshow">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import axios from 'axios';
export default {
  name: "index",
  data() {
    return {
      dialogFormVisible: true,
      textarea:'',
      checked: true,
      menu: [
        {
          qid: 0, //题型序号
          label: "单选题",
        },
        {
          qid: 1,
          label: "多选题",
        },
        {
          qid: 2,
          label: "简答题",
        },
        {
          qid: 3,
          label: "判断题",
        },
        {
          qid: 4,
          label: "填空题",
        }
      ],
    };
  },
  mounted() {
    axios.get('http://42.193.219.14:8080/teacherPropositionNorm',{
      headers: {
          "Content-Type": "application/json",
          "Authorization": "Bearer " + sessionStorage.getItem('token')
        },
    }).then(data=>{
      this.textarea=data.data.data
      console.log(1)
    });
  },
  methods: {
    isshow() {
      if (this.checked) {
        this.dialogFormVisible = false;
      } else {
        this.$message({
          message: "请先同意遵守命题规范",
          type: "warning",
          showClose: true,
          duration: 2000,
        });
      }
    },
    submitSure() {
      let option = { qid: this.menu.qid };
      switch (option.qid) {
        case 0:
          this.$router.push({
            path: "/single",
          });
          break;
        case 1:
          this.$router.push({
            path: "/multiple",
          });
          break;
        case 2:
          this.$router.push({
            path: "/short-answer",
          });
          break;
        case 3:
          this.$router.push({
            path: "/true-false",
          });
          break;
        case 4:
          this.$router.push({
            path: "/gap-filling",
          });
          break;
        case 5:
          this.$router.push({
            path: "/discuss",
          });
          break;
        case 6:
          this.$router.push({
            path: "/compute",
          });
          break;
        case 7:
          this.$router.push({
            path: "/information",
          });
          break;
        case 8:
          this.$router.push({
            path: "/sort",
          });
          break;
        case 9:
          this.$router.push({
            path: "/cloze-test",
          });
          break;
        case 10:
          this.$router.push({
            path: "/reading-comprehension",
          });
          break;
        case 11:
          this.$router.push({
            path: "/integrated",
          });
          break;
      }
    },
  },
};
</script>

<style scoped>
.app-container {
  margin-left: 500px;
}
</style>
